<template>
  <div class="filter-container">
    <el-button type="text" @click="drawer = true">
      高级筛选
      <SvgIcon icon-class="filter" className="filter-icon" />
    </el-button>
    <el-drawer
      title="高级筛选"
      :visible.sync="drawer"
      direction="rtl"
      size="24%"
    >
      <slot />
      <div class="slot-foot">
        <slot name="foot" />
      </div>
    </el-drawer>
  </div>
</template>
<script>
export default {
  name: 'FilterDrawer',
  data() {
    return {
      drawer: false,
    };
  },
};
</script>
<style lang="scss" scoped>
.filter-container {
  margin-left: 30px;
  .filter-icon {
    width: 14px;
    height: 14px;
  }

  ::v-deep .el-drawer__body {
    padding: 20px;
  }
}
.slot-foot {
  display: flex;
  justify-content: center;
}
</style>
